<!DOCTYPE html>
<html>
<head> 
    <meta charset=utf-8>
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <title>YuJian你的世界</title>
    <link rel='stylesheet' href='<?php echo Asset::get_file('layui/css/layui.css','plugin'); ?>'>
    <script type='text/javascript' src='<?php echo Asset::get_file('layui/layui.js','plugin'); ?>'></script>
    <script type='text/javascript' src='<?php echo Asset::get_file('jquery-1.8.2.min.js','js'); ?>'></script>
    <script type='text/javascript' src='<?php echo Asset::get_file('home/cscms.js','js'); ?>'></script>
    <meta name="Keywords" content="YuJian你的世界" />
    <meta name="Description" content="YuJian你的世界" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" href="<?php echo Asset::get_file('home/font.css','fonts'); ?>">
    <link rel="stylesheet" type="text/css" href="<?php echo Asset::get_file('home/index.css','css'); ?>"/>
    <link rel="stylesheet" type="text/css" href="<?php echo Asset::get_file('home/swiper.css','css'); ?>"/>
    <script type='text/javascript' src='<?php echo Asset::get_file('home/swiper.js','js'); ?>'></script>
    <style>
        .logo{
            width: 60px;
        }

        .custom-upload-div{
            width: 190px;
            text-align:center;
            border-style: solid;
            border-color: #00c091;
            /*background-image: url('src/005BjCpA1_small.jpg');*/
        }
        .layui-custom-quote{
            padding:0;
            margin-bottom:0;
            border-color:transparent;
        }
        .layui-custom-table{
            background-color: #393d49;;
            width: 900px;
            opacity: 0.85;
        }
        .layui-custom-div-quot{
            border-style: groove;
            border-color: #00c091;
            float: inherit;
        }
        .layui-quot-custom-p1{
            color: #4affff
        }
        .layui-quot-custom-p2{
            color: #ff0000
        }
        .custom-left{
            float: left;
            height: 100%;
            width: 512px;
        }
        .custom-right{
            height: 100%;width: 512px;float: right;
        }
        .custom-content{
            background-color:#1d3651;
            width: 920px;
            height: 100%;
            margin-left:325px;
            text-align: -webkit-center;
            z-index: 1000;
            position: absolute;
            border: 1px;
            border-color: #4affff;
            border-bottom-color: transparent;
            border-style: groove;
            opacity: 0.9;
        }
        .custom-left-right-img{
            width: 100%;
        }
        .title{
            width: 1017px;
            text-align: center;
            margin: auto;
        }
        .custom-home-head{
            height: 280px;background-color: #000000
        }
        .custom-home-head-img{
            height: 100%;text-align: center;margin: auto
        }
    </style>
</head>
<body >
<style type="text/css">html,body{height: 100%;background-color: #0C0C0C}</style>
<div class="custom-home-head">
    <div class="title">
        <img class="custom-home-head-img" draggable="false" src="<?php echo Asset::get_file('home/background_home_2.jpg','img'); ?>" alt="">
    </div>
</div>
<div class="header">
    <div class="w960" >
        <a class="logo" href="#" title="YuJian你的世界"></a>
        <ul class="layui-nav" lay-filter="">
            <li class="layui-nav-item layui-this"><a href="<?php echo Uri::create('home/index'); ?>">首页</a></li>

            <li class="layui-nav-item">
                <a href="<?php echo Uri::create('home/movie'),'/film'; ?>">电影</a>
            </li>

            <li class="layui-nav-item">
                <a href="<?php echo Uri::create('home/movie'),'/tv'; ?>">电视剧</a>
            </li>

            <li class="layui-nav-item">
                <a href="<?php echo Uri::create('home/movie'),'/variety'; ?>">综艺</a>
            </li>

            <li class="layui-nav-item">
                <a href="<?php echo Uri::create('home/movie'),'/anime'; ?>">动漫</a>
            </li>

        </ul>
    </div>
</div>
<div class="custom-left">
    <img draggable="false" class="custom-left-right-img" src="<?php echo Asset::get_file('home/background_left.jpg','img'); ?>" alt="">
</div>
<div class="custom-right">
    <img draggable="false" class="custom-left-right-img" src="<?php echo Asset::get_file('home/background_right.jpg', 'img'); ?>" alt="">
</div>
<div class="custom-content" id="dataContent">
</div>
<script>
    //数据URL
    var URL_GETDATA = "<?php echo Uri::create('home/getdata'); ?>";
    var URL_DETAIL = "<?php echo Uri::create('home/detail'); ?>";
    //layui加载
    layui.use(['jquery','layer'],function () {
        var $ = layui.jquery,
            layer = layui.layer;
        var typeName = {'film' : '最新电影', 'tv' : '最新电视剧', 'variety' : '最新综艺', 'anime' : '最新动漫'};
        var dataType = {0 : 'film', 1 : 'tv', 2 : 'variety', 3 : 'anime'};
        var i = 0;
        getData();
        //获取数据
        function getData() {
            $.post(URL_GETDATA, {type : dataType[i]}, function (res) {
                var resultData = eval('(' + res + ')');
                var data = resultData['data'];
                initilData(typeName[resultData['type']], data);
                i ++;
                if(i < 4){
                    getData();
                }
            });
        }

        function initilData(type, data) {
            var index = layer.load(1);
            setTimeout(function () {
                layer.close(index);
                var handledata = data;
                var html = '';  //由于静态页面，所以只能作字符串拼接，实际使用一般是ajax请求服务器数据
                html += '<table class="layui-table layui-custom-table" ><tbody>';
                html += '<tr><td colspan="4"><p class="layui-quot-custom-p1">' + type + '</p></td></tr>';
                //遍历文章集合
                for (var i = 0; i < handledata.length / 4; i ++)
                {
                    html += '<tr>';
                    for (var j = i * 4; j < 4 * i + 4; j ++ )
                    {
                        var item = handledata[j];
                        html += '<td><div class="custom-upload-div" onclick="openDetail(' + '\'' + item['movie_type'] + '\'' + ',' + item['id'] + ')"><img alt="' + item['movie_name'] + '" title="' + item['movie_name'] + '" src="' + item['picture_src_path'] + '"/><div class="layui-custom-div-quot"><blockquote class="layui-elem-quote layui-quote-nm layui-custom-quote"><p class="layui-quot-custom-p1">' + item['movie_name'] + '</p><p class="layui-quot-custom-p2">' + item['update_time'] + '</p></blockquote></div></div></td>';
                    }
                    html += '</tr>';
                }
                html += '</tbody>';
                html += '</table>';
                $('#dataContent').html( $('#dataContent').html() + html);
                //$('.custom-content')[0].css('width','100%');

            }, 500);
        }
        //处理数据
    });

    function openDetail(movieType,currentID) {
        window.location = URL_DETAIL + '/' + movieType + '/' + currentID;
    }
</script>
</body>
</html>